<template>
    <div>
        <el-main>
            <el-row :gutter="20">
                <el-page-header @back="goBack">
                </el-page-header>
                <el-col :span="20" :offset="2">
                    <el-card shadow="hover" v-for="(data,index) in formdata" :key="index">
                        <el-row :gutter="20" style="line-height:30px">
                            <el-col :span="4">
                                <el-image :src="data.image" fit="cover" style="width: 100px; height: 100px"></el-image>
                            </el-col>
                            <el-col :span="2">
                                <el-image :src="shuxian.url" fit="cover" style="width: 100px; height: 100px"></el-image>
                            </el-col>
                            <el-col :span="10">
                                <span class="name">{{data.name}}</span>
                                <br>
                                <span class="appraise">5.0分  </span>
                                <span class="sail">月售3000份</span>
                                <br>
                                <span class="description">{{data.description}}</span>
                            </el-col>
                            <el-col :span="8" >
                                <br><br>
                                <el-button type="primary" round icon="el-icon-chat-dot-round" v-if="data.employeeId != null&&data.employeeId!=''" @click="tochat(data)" size="mini">联系骑手</el-button>
                                <el-button type="warning" round icon="el-icon-time" size="mini">{{data.statusDecode}}</el-button>
                                <el-button type="danger" round size="mini" icon="el-icon-circle-check" v-if="data.status == 3" @click="confirmReceipt(data)">确认收货</el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <el-empty :image-size="200" v-if="isEmpty"></el-empty>
        </el-main>
    </div>
</template>
<script>
import {getOrderData,updateOrder} from '@/utils/modules/customer.js'
export default {
    mounted(){
        this.getOrderData()
    },
    data() {
        return {
            formdata: [
                
            ],
            shuxian:{
                url:'/images/shuxian.png'
            },
            distinguish:'yes',
            isEmpty:false
        }
    },
    methods: {
        getOrderData(){
            getOrderData({'distinguish':this.distinguish}).then(res=>{
                this.formdata = res.data.itemList
                if(this.formdata.length == 0){
                    this.isEmpty = true
                }
                console.log(this.formdata)
                for(let i = 0 ; i < this.formdata.length ; i++)
                {
                    if(this.formdata[i].status == 2)
                    {
                        this.formdata[i].statusDecode = '待配送'
                    }else if(this.formdata[i].status == 3)
                    {
                        this.formdata[i].statusDecode = '配送中'
                    }
                    else{
                        this.formdata[i].statusDecode='已完成'
                    }
                }
                this.$message({
                    type:'success',
                    message:res.message,
                    showClose:true
                })
            }).catch(err=>{
                if(this.formdata.length == 0){
                    this.isEmpty = true
                }
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        },
        goBack(){
            this.$router.push({
                path:'/customer'
            })
        },
        tochat(val)
        {
            console.log(val)
            this.$router.push({
                path:'/chat',
                query:{
                    toId:val.employeeId,
                    fromId:val.userId,
                    fromSign:0,
                    toSign:1
                }
            })
        },
        confirmReceipt(val){
            updateOrder({'id':val.id,'status':4}).then(res=>{
                this.$message({
                    type:'success',
                    message:res.message,
                    showClose:true
                })
                setTimeout(() => {
                    this.$router.go(0)
                }, 200);
            }).catch(err=>{
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        }
    }
}
</script>
<style>
    /* 名字 */
.name {
    font-weight: 500;
    font-size: large;
    /* padding-left: 50%; */
}
/* 评分 */
.appraise {
    font-size: small;
    color: red;
    font-weight: 100;
    /* padding-left: 50%; */
}
/* 月售 */
.sail {
    font-size: small;
    font-weight: 100;
    color: #475669;
    /* padding-left: 50%; */
}
.description{
    font-size: small;
    color: lightgray;
    font-weight: 400;
}
</style>